<template>
  <div class="table-database-vue">
    <el-card style="margin: 10px" shadow="never">
      <div slot="header" class="clearfix">库信息</div>
      <el-form label-width="100px" style="width: 700px">
        <el-form-item label="数据源：" style="float: left">{{
          vueQueryParam.host
        }}</el-form-item>
        <el-form-item label="数据库：" style="margin-left: 70%">{{
          vueQueryParam.dbName
        }}</el-form-item>
      </el-form>
      <el-form :inline="true" label-width="100px">
        <el-form-item label="关键字：">
          <el-input
            v-model="keyword"
            placeholder="输入字段名或注释搜索相关的表或字段信息"
            style="width: 500px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="search-submit"
            type="primary"
            icon="el-icon-search"
            @click="searchSubmit"
            >模糊搜索</el-button
          >
        </el-form-item>
        <div style="margin-left: 35px; width: 700px">
          <el-checkbox style="margin-left: 10%" v-model="searchTable"
            >按表名查询</el-checkbox
          >
          <el-checkbox style="margin-left: 5%" v-model="searchColumn"
            >按字段查询</el-checkbox
          >
        </div>
      </el-form>
    </el-card>
    <div style="padding: 10px" v-loading="columnListLoading">
      <el-table
        :highlight-current-row="true"
        :stripe="true"
        :header-cell-style="{'text-align':'center','background-color': '#F1F1F1','color': '#333333','font-weight': 'bold'}"
        :cell-style="{'text-align':'left','margin-left': '30%'}"
        :data="columnList"
        align="center"
        style="width: 70%; margin-bottom: 5px"
        class="tableSearch"
      >
        <el-table-column
          prop="tableName"
          align="left"
          label="表名"
          width="300"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="columnName"
          label="字段名"
          align="left"
          width="300"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
                prop="columnType"
                label="字段类型"
                align="left"
                width="200"
                :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="description"
          align="left"
          label="注释"
          width="300"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import datasourceApi from '../../common/api/datasource'

export default {
  data () {
    return {
      columnListLoading: false,
      vueQueryParam: {},
      columnList: [],
      tableInfo: [],
      keyword: '',
      searchTable: true,
      searchColumn: true
    };
  },
  mounted: function () {
    // 延迟设置展开的目录，edit比app先初始化
    setTimeout(() => {
      this.$emit('initLoadDataList', {
        sourceId: this.vueQueryParam.sourceId,
        host: this.vueQueryParam.host,
        dbName: this.vueQueryParam.dbName
      });
    }, 500);
  },
  activated: function () {
    this.initQueryParam(this.$route);
  },
  methods: {
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F1F1F1;color: #333333;font-weight: bold;'
      }
    },
    initQueryParam (to) {
      this.vueQueryParam = to.query;
      let newName = { key: this.$route.fullPath, val: '库-' + this.vueQueryParam.dbName };
      this.$store.commit('global/addTableName', newName);
    },
    searchSubmit () {
      if(this.searchTable == false && this.searchColumn == false) {
        this.$message.warning("查询类型至少选中一个")
        return false
      }
      this.columnListLoading = true;
      this.vueQueryParam.searchText = this.keyword;
      this.vueQueryParam.searchTable = this.searchTable;
      this.vueQueryParam.searchColumn = this.searchColumn;
      datasourceApi.tableAndColumnBySearch(this.vueQueryParam).then(json => {
        this.columnList = json.data || [];
        this.columnListLoading = false;
      });
    },
  }
}
</script>
<style>
.table-database-vue .el-table td,
.table-database-vue .el-table th {
  padding: 5px 0;
}
.el-form-item {
  margin-bottom: 10px;
}
.tableSearch div table tbody tr td div{
    margin-left: 20%;
  }
</style>

